<template>
    <!-- list-Navbar -->
    <div class="list-Nav">
        <van-nav-bar title="商品列表" left-text="" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="goods-list">
        <div class="goods-menu" v-for="item in goodsList" :key="item.id">
            <router-link :to="{ name: 'goodsDetail', params: { id: item.id } }">
                <van-image width="150" height="150" :src="item.picture" />
                <h1 class="title">{{ item.name }}<span class="goods-tip">{{ item.spec }}</span></h1>
                <p class="detail">
                    <span class="price">￥{{ item.price }}</span>
                    <span class="quantity">剩余{{ item.stock }}件</span>
                </p>
            </router-link>
        </div>
        <van-button class="loading" :disabled="loadlast" v-if="goodsList.length !== 0" size="large" type="primary" plain
            hairline @click="getLoading">加载更多</van-button>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getGoodsList } from '../api';
import { showToast } from 'vant';

const goodsList = ref([])
const loadlast = ref(false)
// 将指定id设置为0
let last_id = '0'

// 声明传值
const props = defineProps({
    category_id: String
})

//生命周期开始时就调用方法
onMounted(() => {
    GoodList()
})

//navBar返回上级
const onClickLeft = () => history.back()

// 请求接口返回数据
const GoodList = async () => {
    // console.log(props.category_id);
    let params = {
        last_id,
        // props传值（父组件中的分类id）
        category_id: props.category_id,
        //显示条数为4
        pagesize: 4
    }
    const data = await getGoodsList(params)
    if (data.length > 0) {
        //大于0（将新的值合并到原数组的值）
        goodsList.value = goodsList.value.concat(data)
        //last_id就会是data数组中的索引值id，（获取这个数据）拿索引值，length长度-1为索引值
        last_id = data[data.length - 1].id
    } else if (goodsList.value.length > 0) {
        //到达底部Toast
        showToast({
            message: '已经到达底部',
            type: 'fail'
        })
        loadlast.value = true
    } else {
        //列表为空Toast
        showToast({
            message: '列表为空',
            type: 'fail'
        })
    }

}

// 加载更多
const getLoading = () => {
    GoodList()
}
</script>


<style scoped>
.list-Nav {
    --van-nav-bar-background: #ff8001;
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
}

.goods-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
    clear: both;
}

.goods-menu {
    width: calc(calc(100% / 2) - 12px);
    margin: 10px 10px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
    border: 1px solid #efeff4;
    padding: 10px 0;
    clear: both;
}

.title {
    text-align: left;
    font-size: 14px;
    color: #333;
    margin: 10px 0 0;
    padding: 0 5px;
}

.goods-tip {
    font-size: 12px;
    padding-left: 2px;
    color: #999;
}

.detail {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 0 5px;
}

.price {
    color: red;
    font-weight: bold;
    font-size: 16px;
}

.quantity {
    font-size: 13px;
    color: #999;
}

.loading {
    margin: 40px 20px 40px 10px;
    font-size: 14px;
}
</style>